MENU
Hana One
UX/UI Design
Client Q&A
To begin the process, we had the client fill out a questionnaire to help my team to define the goal of the product, what success looked like, any inspirations, and other like details. Establishing a strong base was essential since my team was building the concept from inception.
The main takeaways:
-
Prioritize convenience, efficiency, and fostering meaningful connections.
-
Success is defined as an intuitive tool that requires very little hands on management and reduces the workload of the consumer and agent.
-
Most important features: messaging, questionnaire, profile information, workflow/timelines, uploading videos/documents.
IDEATION
DISCOVERY
User Flows
In order to satisfy the deadlines, the team split the user stories. I took on the third user story from the user flows on.
While the other user stories led to creating specific pages, this user story was asking for a feature that could have been included on multiple pages. This feature was also dependent on the UX of other pages, such as the home page, messages, or how the user would keep track of client activity. I initially created two versions, one had the user access the client profile through their messages, while in the second the user accessed the client profile or the client activity log and pressed a button. My team and I ended up deciding on the latter flow due to UX decisions made for other pages.
The user flows identified some holes in our initial foundation for the designs and revealed we needed further clarification on certain details.
As a User...
Real Estate Agent- I want to be able to receive and respond to messages from prospective clients.
Real Estate Agent- I want to be able to let Hana One that I've been hired by a particular consumer."
Consumer or Real Estate Agent- I want to be able to populate and edit my profile- Record a video, upload a bio, and upload a CV.
DESIGN
Wireframes
To begin the actual design, we started with low-fi wireframes to confirm the screens we decided on during the user flows and to see what other screens we needed to add. Being a remote team, the low-fi wireframes took the place of sketches.
For the Mid-Fi wireframes, it became very clear that User Flow 3 was more complex than originally thought. Because this user flow was asking for a feature that was dependent on the design of other pages, I ended up designing said pages. For the Low-Fis, I had designed three pages with two options for additions to other pages, for the Mid-Fis, I created seven pages. By the fourth iteration of the Mid-Fis, I had designed more complex yet user-centered pages that allowed the user to access information without having to search for it. This included the addition of the Quick Access feature on the Home page, the Search and Filter features on the Matches page, and the sleek Client Activity Log.
UI Inspiration
Before beginning on the wireframes, I had the team explore different app designs to draw inspiration from. This was very beneficial after deciding on the final user flows since we had determined the screens to include in the design. I asked the team to look for inspiration for not only their specific screens (onboarding, log-in, messaging, profiles, etc.) but also for UI inspiration.
Color Exploration
The Color Explorations were done by two of my designers. Since we were designing a concept and there was no existing branding for Hana One, we provided six options for the client to choose from. We provided them with options ranging from bright and colorful to simple and relaxing.
**Some designs were cut off for the sake of presentation in this case study**
FINAL DESIGN
Developer Handoff
To finish up the project, we annotated our designs for the developer handoff. Since this design was an initial concept to present to investors to gain funding, there may be later stages of the design that my team will not be a part of. Annotating in great detail was essential for the future designers and developers.
As a lead designer
Guiding a team of designers gave me the opportunity to expand my knowledge in order to provide the best guidance possible. Providing a strong base of information and knowledge for the team requires a lot of research and planning, which proved to be useful and will be beneficial in future projects.
REFLECTION
Designing an iOS native app
I feel that so often apps strive to be different or groundbreaking, as there is such a large market, but it is more difficult than I originally thought. With this project, it became clear there were far more limitations with app design than there are with web design. The smaller screen sizes limit the amount of content, hierarchy, color palettes, typography, etc. The best apps focus primarily on UX creating an exciting user experience, and keeping the UI simple and not distracting.
Designing a concept
Designing a product from a concept requires the designers to be extremely flexible. Starting from an idea means a lot of the design process is exploratory, designers need to explore different paths before settling on the best one. There may not be one right answer, so it is important to have thoughtful discussions with your team in order to make a decision.
PROJECT
Hana One
ROLE
Lead UX/UI Designer, Team of 5
DATE
June 2023 - August 2023
BRIEF
Hana One is an iOS application to connect clients looking to buy and/or sell a home with an accredited Real Estate agent. Unlike other house-hunting apps, Hana One is modeled after dating apps and matches users based on their personality type. I led a team of 4 designers to bring the concept to life for the client to present to investors to gain funding.
PROBLEM
There are plenty of websites to search for a home, but nothing to help clients find the right Real Estate agent. First time buyers typically don't know where to start and/or clients settle for the first agent they have access to.
SOLUTION
We created an iOS app that allowed for peace of mind through an initial vetting process, personality questionnaire, and personalized profile, and different tracking metrics for both clients and agents.
UI Iterations
Based on the feedback from the client, we created three UI iterations of two screens. The three colorways chosen were Open Concept, Energetic yet Peaceful, and Lake Vibes.
The client ended up not picking on specific colorway, but rather picking and choosing different colors.
Style Guide
I was responsible for the Style Guide. I featured the final color palette, as mentioned above it was primarily the Energetic yet Peaceful colorway with a few alterations. This colorway was a great choice as it was simplistic yet clean and appealing. For typography, we went with Inter, an open-source sans-serif. Phone screens are already very small so it is essential the font is clean and easy to read. I also included spacing and the grid to ensure consistency and aid the developer. The last screen is all the buttons, components and icons. Overall, the style guide will be useful for any future extensions of the project and for the development team.
