HOPS happy hour app

UI design
Timeline
7 months
Cilent
HOPS
My role
Product designer
Project type
UI design
As the Auckland night culture slowly starts to recover in a post-pandemic world, HOPS aims to revitalise and enhance Auckanders nightlife by making bar hopping and discovering cheap eats easier and more accessible than before. I joined the team as a volunteer UI designer. However, I eventually became one of the product designers on the team. Through an expensive process of user research, competitive and market analysis, and visual and UI design, I helped create the HOPS app's overall feature set, user interface and user experience. With the permission of HOPS, I am able to show an early iteration of the App design as well as the style guide that I created.
Early stage design
Collaboration and team dynamics
Within HOPS, I worked alongside engineers, the founder who acted as the product manager and other stakeholders. I was able to collaborate effectively, running daily stand-ups, discussing and explaining design choices to the engineers while also incorporating their feasibility concerns and suggestions. I also worked closely with the product manager to create not only the UI and UX design but also the features, business strategy and further growth plans for the HOPS app.
01 - Style Guide
The focus was on creating iconic branding through the UI design that focused on a minimalistic style to create something easy to understand but effective in function. The style guide utilises a specific cool scheme to reflect the “comforting nightlife vibe”  as described by other HOPS team members and test users.
Style guide
02 - UI Design
The UI design was kept relatively simple, using existing design conventions and app styles to give users a sense of familiarity while also providing a more refined experience compared to the competition. User testing indicated a positive reaction and an overall preference for the app's visual style and functionality over existing apps.
User UI
Venue UI
A venue mode was also created to allow venues to update their specials and page. These features were limited in this iteration of the design as this version of the app was only used for internal and small scale testing. Venue mode also has similar functionality to the user mode so managers can see what their customers would see as well.
Sample Interactions
Interactions were design to help with certain functions, a few of these have shown below
03 - Final Design

Our final design solution was a new UI and UX design for the proposed app. This app design is bold, simple and effective, with high satisfaction from test users. This was stage one in providing Aucklanders with an improved nightlife experience.

Full case study and updated design coming soon

No items found.
Timeline
7 months
Cilent
HOPS
My role
Product designer
Project type
UX design
As the Auckland night culture slowly starts to recover in a post-pandemic world, HOPS aims to revitalise and enhance Auckanders nightlife by making bar hopping and discovering cheap eats easier and more accessible than before. I joined the team as a volunteer UI designer. However, I eventually became one of the product designers on the team. Through an expensive process of user research, competitive and market analysis, and visual and UI design, I helped create the HOPS app's overall feature set, user interface and user experience. With the permission of HOPS, I am able to show an early iteration of the App design as well as the style guide that I created.
view final solution
00 - The Problem
Background
Turners Cars is a car sales auctioning company that also provides car insurance. Although Car sales are their primary focus, insurance sales have become increasingly important. The sales teams would like to expand operations; however, they are overworked with customer queries of quotes since many of their new demographic are younger and lack experience in this process.
Problem
How can we guide the younger generation through this process and reduce the workload load on staff?
Process
This was a multi-week design challenge, so I had time to use a standard 5 step design process. Unfortunately, the testing and ideation phases were limited as this was not part of our scope.
01 - Research
I was responsible for both design and research, which meant that the effective collaboration and communication between the engineering team and me was the key to our success, especially during the research and define phase.With this project, I actually found myself relating to the target demographic. As someone who has tried (and failed) to understand their car insurance, I found it easy to empathise with this problem. This greatly helped me along my research journey and gave me an early level of empathy.
Interviews
I decided to conduct a series of interviews between both the management of TurnersCars as well as users with previous experience using their website. This allowed me to define key pain points and create an empathy map to define user personas.
User pain points
  • Poor informational clarity.
  • Confusing user flow and understanding of how to use the site.
  • Time is wasted looking for information and calling customer service.
  • Lack of customer support outside of the calling customer service.
  • The website is visually unappealing and cluttered.
Staff pain points
  • The insurance processing system is inefficient and inadequate.
  • The team is overwhelmed with customer queries.
  • Too much time is dedicated to customer service, and other tasks are being neglected.
Competitive analysis
I then undertook a competitive analysis to see the strengths and weaknesses of TurnersCars’s main competitors. This allowed me to discover common pain points across each platform and allowed me to draw inspiration from their designs. From this, I had a greater understanding of the potential opportunities for our design solution.
Current user flows
To better understand how their system worked, I collaborated with another designer who was also doing this challenge to create a user flow covering a few scenarios from the existing TurnersCars website. This gave me better context and allowed me to see how a new insurance experience would need to fit into the overall system.
Opportunities
After conducting the research and understanding the pain points, I met up with the team developers to discuss the findings. I felt that this was necessary as I wanted to increase engagement between both parties and help discover feasibility issues early on. From this meeting, we created a list of potential opportunities for our solution. A few of these opportunities have listed below.
  • A solution that automatically creates a quote and walks users through the process.
  • A detailed onboarding system that reduces staff work and improves speed for users.
  • A centralised space for information that can be easily accessible from anywhere.
02 - Define
The focus was on creating iconic branding through the UI design that focused on a minimalistic style to create something easy to understand but effective in function. The style guide utilises a specific cool scheme to reflect the “comforting nightlife vibe”  as described by other HOPS team members and test users.
  • The current design of the website is both unintuitive and outdated for most users. Because of this, unfamiliar users are unable to find the necessary information and lack clear guidance in how to purchase car insurance from Turner’s car which leads to a reduction in sales and low user satisfaction.
  • Information and queries are hard to find and required human intervention. This leads to the Customer inquiries being poorly answered leading to general user annoyance and the sales team being overwhelmed with general inquiries.
  • There is a lack of product information that is easily accessible which causes more hesitation in the user and does not promote Turners cars competitive edge which in turn reduces potential opportunities for sales
Problem redefined
How can we help the younger generation and guide them through the insurance purchasing process so that they can get their quote/information quickly and confidently while reducing the workload on Turners Cars staff and increase their sales?
User Personas
from this a central point for empathy was created to guide our design process and define the user that we are created the solution for.
User Journey
I decided to map out the old user journey to give context to our design changes as well as visualise where our changes would improve the experience and help define the problem space.
Key metrics
It was important to me to see if our design solution was actually effective. I created a few key metrics that I would use to show the success of our design. These were mostly based on the pain points from the research section.
  • Decrease user time to get a quote
  • Reducing customer queries
  • Increase insurance sales from the younger demographic
03 - Design
As I was the main designer in the team, I was responsible for the ideating, wireframing and high fidelity prototypes. As this was just an initial stage design, I limited the complexity of the visual design to create something simple.
Helping out the developers
Through the daily stand ups with my team of developers, I found out that many of them were struggling with the workload and technical side of the design. I didn’t want to make life harder for them, so I decided to limit then design and create a simplified design solution that could still meet the needs of the user.
Initial ideation
Designed user flows
Feature prioritisation
As time was getting more limited, I decided to run a meeting with the developers to help prioritise the development of the features in our MVP. I created a simple matrix based on three criteria, feature effectiveness, feasibility and time needed to develop. We graded each feature out of 5 for each criterion in a collaborative setting. However, certain features that we deemed essential were left out of this process as their exclusion would have changed the design solution.
Early wireframes iterations
As a result of the feature prioritisation, minor iterations were made to the wireframe to reflect those results. These iterations also were made to cater for the younger demographic by reducing the visual noise and clutter of the page and creating something more approachable to someone with less experience.
Style guide
High fidelity prototypes
04 - Testing & Iterating
Usability testing was done to check if the solution was functional and met the expectations and standards of the target demographic. The testing was done using a wireframed mockup that included additional features that were not included in the high fidelity design due to time.
Methodology
The user was given four scenarios to perform. I would record the session, take notes about points of struggle or confusion, and rank them 1 - 10 in importance. The time taken to complete tasks was also recorded to check how efficient the experience was
Key insights
  • with no follow up after the initial purchase, lack of contact would make the user feel anxious
  • The main flow of buying insurance was super effective. Users enjoyed the flow, and the time to get a quote was significantly reduced 
  • Users tend to get confused about whether having an account is required and when they should log in or make an account.
  • The information bar below the quick quoter was generally underutilised.
05 - The Next Steps
This project's scope meant that, unfortunately, further iterations were not done. However, from the insight we gathered during the testing phase, there were still many lessons and steps we could consider for the project's next phase. These were
  • Implementing the feedback from testing into our iteration phase to improve the existing design
  • Further designs should expand upon the post insurance purchase user journey.
  • As users find the current quick quoter design effective, the capabilities of the design should be further improved upon with the potential to add alternative pathways based on user choices and inputs.
  • Look into alternative methods of customer support such as chatbots or AI.
06 - Final Solution

Our design solution was an improved and enhanced insurance purchasing journey that simplified the process into understandable and digestible parts. Our solution also included redesigning the page's visual elements to reduce visual clutter, increase informational clarity and improve the overall usability of the page.

Outcomes
  • Increased the speed at which users were able to generate usable quotes by 50%
  • Decreased overall queires and support needed based on user testing results
  • Estimated to increase sales of insurance with both younger and older demographics making TurnersCars a more competitive platform
No items found.
Timeline
7 months
Cilent
HOPS
My role
Product designer
Project type
UX design
As the Auckland night culture slowly starts to recover in a post-pandemic world, HOPS aims to revitalise and enhance Auckanders nightlife by making bar hopping and discovering cheap eats easier and more accessible than before. I joined the team as a volunteer UI designer. However, I eventually became one of the product designers on the team. Through an expensive process of user research, competitive and market analysis, and visual and UI design, I helped create the HOPS app's overall feature set, user interface and user experience. With the permission of HOPS, I am able to show an early iteration of the App design as well as the style guide that I created.
view final solution
00 - The Problem Space
Context

Auckland Property Management aims to help its clients reduce their risks and stress while maximising the financial performance of their rented properties. They also aim to increase their younger demographic and update legacy designs

Problem Statement

How can we create a easier more efficient way for young professionals find their ideal property that will meet  their specific needs so that they can have an ideal environment  to live and work from as ?

The Process

The time constraints of this design challenge required our team to work efficiently. As APM provided background research and context to the problem, this case study will focus more on the challenge's design process and project management. I decided that our overall workflow should be structured in 3 main stages Define, Design and Test/Iterate. This ensured that we could follow a consistent design process while giving work to the developers and working cooperatively in an agile environment.

01 - Define

In this stage, we aimed to define our problem and scope our solution. Given the limited time, I placed heavy importance on this phase as I felt that if we were able to define our problem effectively and have clear design goals, our solution would be more focused on the core user problems and thus be more successful.

Frome this we created a proto persona and define user goals for our design solution. We then undertook a web page analysis of the existing design to further empathise with the user and identify key pain points and opportunities for the design phase.

Proto-persona

A simplistic proto persona was created to give designers a specific context to the problems and a point of empathy. As the goal was to target a certain demographic, our persona similar reflected that demographic and was used to highlight their specific needs

Defined project goals

These are the  defined project goals for both user and business. From this we created an ideal flow illustrating the “happy path” a user would take.

Webpage Analysis
To help with our design stages, a webpage analysis of the current website was undertaken. I ran a collaborative workshop session for our UX team to identify user pain points and opportunities for improvement. This information was then relayed to the developers to discuss potential solutions and feasibility.
Pain Points
02 - Design

Leading on from the define stage, we decide on three core problems that our solution would directly improve upon. These were difficulty finding a property that fits the user's needs, limited information clarity and outdated design language. From this, we went into our design process.

Design Process
In our design process, we focused on rapid idea generation through design methods such as crazy 8's and design sprints. Our early designs were done through physical sketches, then Figma for wireframing and creating the interactive hi-fidelity prototype. Through Figma's jam board, the team was able to collaborate and use an agile mindset when approaching the design
Agile mindset in practice

Throughout this stage, I set up the team so that UX designers would actively communicate with the developers through daily stand-ups and workshops. These agile practices allowed a dialogue between designer and developer, leading to early feasibility issues being identified, such as API issues, list formatting, auto-scroll features, keyword search bar etc.

Style guide

We decided that a simplistic style guide would be used to reduce the developers' workload and save time. The focus of the design was on bold, strong colours and typography while maintaining a minimalistic look that felt modern. A similar colour scheme to the original site was used to preserve APM's brand identity.

High fidelity prototypes

From our sketches and wireframing, a draft high fidelity prototype was created. This prototype covered the key features of our design solution, such as the improved filtering system, the keyword search function and the new list and map layout .

Key insights from the devs
‍

A walkthrough with the developers was conducted, which allowed the developers to offer a few key insights. These were as follows.

03 - Test & Iterate

While the developers were creating the MVP, the designers were constantly testing and iterating the design in response to user testing feedback and feedback and requirements from the dev team.

Example of iteration

An example of our iteration was replacing our keyword-based search system to a tag-based one. Initially, the UX designers believed that a keyword system to search property pages would increase users' chances of finding properties that meet particular niche needs. However, after discussing potential usability issues such as spelling errors or different ways to search something (i.e. Pet allowed vs Pet-friendly), a tagged based search system was incorporated.

orginal search bar
updated search bar
1st Round testing

The main objective of our testing phase was to determine the feasibility and usability of our design.
The following are some key insights for improvemtn from first-round testing.

Testing methods used
  • Expected clicking on the “Add tags” bar to be a dropdown list of checkboxes, instead of the chips we designed.
  • Unsure that the property cards would take users to the property details page, like how “More details” link would. We decided that if we had more time, a hoverstate on the cards would have solved this issue.
  • Confusing "List view" vs "Map view" toggle button. I didn't see this before, but we are making the user guess! With iteration, I would need to make both toggle options visible.
04 - The Next Steps

We handed over a functional MVP that showed improved search functionality and general improved visual design. Due to the time limitations of this project, there are still many avenues of improvement that could be considered

  • Implementation of 2nd round testing results and further iterations to improve our design.
  • Focus on the second stages of the ideal user flow, such as the property page experience and booking and application process
  • A more detailed and comprehensive style guide and more custom graphical work
05 - Final Solution

Our design solution was an improved and enhanced property browsing page that utilises an enhanced search and filtering features to allow users to have an efficient and streamlined user experience. This will make APM a more competitive platform by matching the user experience of competitors and generating more tenants.

Outcomes
  • Decreased required screens needed to achieve ideal userflow
  • Improved the user's search satisfaction and increase the searchability of properties 
  • estimate to reduce search time by 60%
No items found.

other projects

Research 
9spokes Internship - Coming Soon
UX design
Auckland Property Management
UX design
TurnersCars
@ 2022 Simon Weng
InstagramLinkedInEmail