Project overview
This project is a concept project done during my time at DesignLab/UW
Vesper is a hiking organization committed to get hikers of all experiences levels out in the great outdoors. They want to build a mobile app but only have a few broad ideas regarding what they want it to look like. The goal is to simplify the experience of planning hikes all while providing details like road closures, how long hikes will take, and what the weather will be like. The goal is to provide a holistic experience with the user in mind. My role is to help with branding, UX Research, and UX/UI design.
Design Process
I followed human centered design and UX design thinking process to make sure that my design decisions were supported through user research and feedback.

In order to create an  experience for Vesper that is elegant, enjoyable, and trust-able, I needed to better understand the potential users of the site. My first step was to develop a research plan and understand what my research goals were. These are the questions my research sought to answer. 

Research Plan
Competitive Analysis
I started off by conducting a discovery phase based on existing secondary research. After that I began analyzing competitors in the field.
I executed a competitive analysis, comparing Vespers' top 5 personal finance management competitors against one another. Each competitor’s product feature was analyzed and from their I assessed strengths/weaknesses associated with each brand. In this exercise I began to architect provisional personas.
Interview Guide
Research Findings
After conducting a series of interviews and identifying the strengths and weaknesses in competitors to Vesper a persona was created. This helped in identifying product features and design trends that would best accommodate user needs in the hiking app space.
Empathy Map
Site Map and Task Flow
When it came to mapping the information architecture of the app, it made sense to start from a high level and hone in. I started with a broad site map then created a user flow that could also double as a task flow. Creating these documents helped me visualize designs for each portion of the app.
Based on the user research findings and UI requirements, a selection of wireframes were built out. These wireframes were built in a responsive framework, including a version for desktop, tablet and mobile. Annotated Wireframes were additionally created to ensure proper communication of various UI features.
UI Design
Initially through sketching I established the broad outlines of how the app would look then I transition those into low fidelity wireframes. After developing a clickable prototype and receiving feedback I set about transforming what I had into high fidelity mockups. Through a process of visual and UI iterations I transformed my designs into high fidelity mock-ups of the website and it's capabilities. 
Final High-fidelity Wireframes (prior to usability testing)
Iteration and Implementation
Created a clickable prototype using the prototyping tool Invision, built additional screens to make the prototype functional. I performed usability tests to ensure my prototype 'made sense' and actually benefited the user in achieving their goals. Took the subsequent feedback and implemented design changes.
Prototype Screens
Affinity Map
The results from the usability tests were compiled into an affinity map which lays a roadmap for what went well and what changes need to be implemented in the design. The Affinity map states a series of design recommendations/"improvements" which are listed below.
Final designs
After completing final designs, I put them through Invision Inspect so UI developers could take my designs and this information to start creating it. 
Next Steps
Design is fluid and constant. The next steps for this project involve rolling out additional screens for all elements of Vesper's users instead of concepts for the primary user flow. With each set of designs will be an additional effort to continue testing and iterating on those designs. 

You may also like

Back to Top