Questions and answers from our client
OneDATA.Plus
Enterprise management software. One solution with unlimited possibilities.
Background
BDIPlus is an enterprise platform solutions company that develops foundational platforms for enterprise data, customer, analytics, and technology management. Their flagship product, OneDATA.Plus enables customers to continuously analyze their business, understand their changing customers, and transform to the new normal with data, technology, and governance at the foundation.
Problem
BDIPlus is looking to rebrand as OneData.Plus. OneData.Plus is an enterprise marketplace platform that is designed to enable businesses to understand their data, analytics, customers, and technology in one platform with the proper governance in place. OneData.Plus would like to develop a landing page to help simplify their complex product in order to entice new clients with a deeper understanding of their product and services.
Solution
Our team divided up the work to produce three versions of a landing page, to which the client could then choose the design style they liked best. The whole team first generated questions to ask the client and then split up into 3 groups. Each group designed wireframes, a mood board and responsive high-fidelity screen designs.
We designed with the intention of:
Improving the understanding of the product by organizing the information in an easily digestible way
Ensure the navigation was intuitive and easy to understand
Creating an attractive landing page that would compel potential customers to contact OneDATA.Plus to seek out more information on the product
Process
Research & Synthesize
Ideate & Wireframing
Moodboard
UI Design
Tools
Figma
Miro
Photoshop
Duration
6 weeks
Role
UX/UI Designer on a team of 5, split into 3 groups: Research, Wire Frames, UI Iterations, Components
Discovery
Kick-off Meeting
In order to get a deeper understanding of our client and their needs, our team synthesized a list of questions to grasp who the product is for, what type of information they may be looking for, what the company is about, and how can we provide an optimal landing page in accordance to business needs while empathizing with its users. With our questions, we learned the client wanted to ensure that potential clients felt that OneData.Plus, while innovative, was not too complicated for them to use, and that they would save time and money by using it. They also wanted us to include that they offered many different services, but a business could only choose specific services they needed.
They emphasized that they were interested in a more futuristic and innovative landing page compared to their existing version. They wanted their brand colors and style guide to be used, but that we could also change the hues of the colors where needed, and they were open to a dark version of their landing page.
Competitive Design Analysis
Comparing websites in the same space, inspiration from the client, and their current website, we were able to establish what to change to get the client their desired outcome. We evaluated companies that were in a similar space to our clients, including Stripe, Measurable.ai and Crowd.ai.
We noticed these websites were simple and clean, but felt futuristic through their consistent yet deliberate use of color. Gentle gradients and simple icons were popular, along with sharing information about the product in an interesting way. Many micro interactions were present when scrolling or hovering, which was an idea my group connected with. Many also had sticky buttons that allowed users an easy way to contact the company about products.
Ideation
Sketches & Wireframes
My partner and I drew up some sketches based on ideas from our competitive design analysis and answers from our client. After discussion, we immediately made some rapid wireframes.
My group generated 4 distinctly different designs before narrowing it down to one we felt best captured the needs of the client.
The response from the client was very delayed. They informed us they wanted to continue with the design my group created, liked the dark version best, change the arrow to a different shape, change some of the wording, and also wanted to include an option to choose modules, referencing what was done in the V2 wireframe.
UI Design
Moodboard
After getting the clients approval on our lo-fi designs, we found inspiration for the final product. Using different illustrations and UI inspiration, I focused on choosing images that were futuristic, innovative, user-friendly and personalized.
First Iteration
Because of the client's delayed response to our wireframes, along with the feedback they gave us, all 3 groups decided to make hi-fi screens based on my group’s wireframe. We very much liked the idea we saw in our mood boards of glass morphism in a futuristic color scheme, and thought a simple gradient could look professional and eye-catching at the same time.
As we began to design, we realized the strong zig zag line of our design made it very difficult to use glass morphism well and was distracting from the content on each card. We began creating more opaque cards, but felt that it looked very abrupt and harsh. We wanted to offer the client a choice that was unique from our team, but still connected to the original wireframe they liked.
We made our zig zag into more of a curve and brought down its thickness to express the connection of the services offered in a more subtle way. This gave us more freedom with our cards to make them look more like glass with subtle glows behind them.
In light of their comments, we removed the arrows and replaced them with hexagons that fit together, further connecting to the idea that our clients' product was integrative.
Client Feedback
Each group in our team presented 1 iteration of the high fidelity screen they designed based on my team's wireframe. The client was very delayed with responding with feedback.
They chose to continue to development with Version 3. They stated they liked the large use of the orange color and the thick line going throughout but wanted to replace the bottom section with the hexagons my partner and I designed in Version 1.
As our contracted deadline was swiftly approaching, we did not have time to offer up more iterations on our designs. If we had the time, my group would have liked to revisit our design moving back to the thick line throughout and with a better balance of colors, now understanding the client wanted the orange color used more heavily, not as an accent to their other brand colors.
My Group's Complete Hi-Fidelity Design
During the long delay waiting for feedback, my partner and I finished our high-fidelity designs for the client. While they did not choose to move to development with our design, my partner and I were very pleased with the work we created. We had both a light and dark version of the landing page for the client to chose from, features page, sign up modals and sign up page.
Client Handoff & Takeaways
Client Handoff
As we were already over the allotted contract time, my team and I quickly annotated each screen with relevant information so that developers would have clarification on padding, spacing, and styles used in each screen.
Challenges
If the client had been more prompt with their feedback we would have had more time to send off iterations and obtain crucial input. We could have developed a design that better fulfilled both client and user needs.
We would have liked to undertake usability testing on the design they chose to then be able to iterate based on user feedback. However, owing to scheduling constraints, we were unable to do so.
Successes
While my team and I had to deal with many setbacks, we worked together extremely well. My partner and I in particular, collaborated so efficiently; it felt seamless going back to designs we each had iterated on separately.
Communication between our team was collaborative, which helped us to meet our deadlines, and in many cases, work ahead where we could.