The Framework

Our framework is the biggest tool we use, it guides us by dividing up tasks into easily distinguishable phases. We use a mix of Lean UX methodology as well as IBMs Design Thinking. This allows for us to have a cohesive and open team environment. Each of the 6 phases flow into each other seamlessly and allow for the infinite loop of Design, Experiment and Iterate to function properly.

Competitive Audit

The survey made the data even more interesting, out of 160 responses, 15.6% said they were aggressive with their goals while about 40% were in the middle. This continued through the survey as we tried to really dig deep into how people feel about goals, how they accomplish them and how they even record them. We used results from questions like “What hardships do you encounter when trying to achieve your goals?” to really understand where users might need the most help in progressing through their goal however easy or unrealistic it may be.

Focus Group

At this point we had a pretty good idea of what we were going to create but research never stops in the design of a product. We moved into a focus group where we had 6 participants answer a series of 3 questions for us. We kept the room as talkative and free flowing as possible but we did ask some hard hitting questions aimed to really make the participants think. While taxing on them, it did really open their eyes to where they might fail or succeed in their own goals and life challenges. We heard many different reasons for why they think they might get stuck for example, but it usually stemmed from the same place of consciousness, they did not think they could do it. They got in their own head and tricked themselves into think they could not grow or achieve.

Personas

With the initial research phase done, we enter the Define phase and with that our first step, personas. As a team of 3 we each built out a different type of user that might want to use this website. We had the older gentleman Chris who is not the most tech savvy and would need the website to be user friendly, Louise who has trouble staying on track and needs constant reminders of what she is doing and finally Nick, who needs to feel accomplished and feel like he is rewarded for completing his own goals.

User Journey Session

We took these personas and built out a User Journey for how they might interact with the website in stages. While we did use a mix of the 3, the flow of any user should stay the same. So we built it out even using harsh wording such as Execute, because when starting a goal we believe you need to have that violent approach to the process, not just ease into it. We brought these stages with actions and emotions to fellow designers as well as our own development team and had them place ideas on the board. This gave us a good indication of what other users expected to see in a website such as this.

MVP (Minimum Viable Product) Session

Next was the MVP or Minimum Viable Product session, this session fed off the User Journey session with us taking the ideas from the journey session, grouping similar ideas together and bringing them to this board. This was also a chance to really hone in on what our KPIs (Key Performance Indicators) were going to be, how we would we know we are succeeding as website. What it came down to was seeing being able to see users goal progress, how many active user we have at a given time and the user engagement across all features on the site. With these KPIs and Ideas in hand, we took it to the Value and Effort board, where we spoke with our developers on what ideas might be easier said than done to be ready for launch. What we found is that there was a pretty even split of what ideas were High Value/Low Effort and what were High Value/High Effort.

Sitemap

With ideas in mind and a general concept in on paper, we went on to make our sitemap. This is for both us and our developers to get a high level view of the general connections on our site. In this you are able to see that most pages revolve around the set goal process.

UX Strategy

Our UX Strategy needed to hold the same values we believe in our selves when making goals. “We believe in guidance not pressure” came from our own view of how goals should work and that we as users would not want to be pressured in what could be an already stressful situation and this rang true even brining it back to what we found in social listening where someone could feel pressured to make unrealistic goals and that could cause them to never achieve them. “We believe reflecting on progress leads to achieving” came from the aspect of journaling which we saw in some applications we audited but most had it as a side features that most seemed not to use, to us, this should be a major feature. Reflecting shows growth and progress that some might not even notice when in the process of achieving their goals. “We believe in small steps will get you to the finish line” came from Brandon, the end to end designer on our team, he brought up during our working sessions that sometimes its hard to focus on the bigger picture of a goal when you have too many big tasks blocking you from the end goal. With these in mind, we knew the direction we wanted to go in when creating this website and how we were going to achieve it.

Paper Sketches

Entering the design phase, paper sketches are the simplest, fastest and most cost effective way for us to get design ideas down. With just a sharpie and a sketch pad we can jot down ideas that come to mind of how a certain aspect such as the navigation will look. We can also dig semi-deep into what our major pages might look like such as the home, wizard and dashboard and see what early iterations look like.

Wireframes

Wireframe Prototype

Embedded is our final prototype in wireframes, this is fully intractable and you can click on the fullscreen mode to pick it larger to click through. While final mockups and designs did end up differing from our wireframes, this prototype gave us the best idea of how our users should be able to flow through and access our website.

Moodboard

After we had gotten through a bulk of our wireframes, our UI Designer started work on our moodboard which as a group we collectively voted on as the general vibe and feel we wanted for our for the website. Our UI Designer, Maria, a former model and fashion designer, used color theory and posters to help simulate how a user should feel throughout the process. We voted on this moodboard because it helped us best put in perspective the calming nature of our website as well as a general theming. We absolutely loved this board and the colors and feelings it gave us.

Mockups

As we discussed, mock ups are always going to differ from wireframes in certain aspects. This is what makes UX and UI unique, they work hand in hand in making the User Experience intuitive and beautiful. As you can see in the mock ups, we tried multiple different color varieties through but the one that stood out to us the most was the Blues, Purples and Teals. During user testing this gave users a sense of calming nature, comfortability and coziness. It let users know that a stressful decision such as a long term goal was easily achievable and in arms reach as long as they were willing to try.

Accessibility

The first ‘How might we’ we have in our User Journey is “How might we make this accessible”. This was so that we could keep it inclusive for everyone, not a single person should be excluded. In the example shown above we did extensive testing with the colors on our mockups for different colorblind visions. This was done using a plugin in Figma which allowed us to take those views and go through them as a team and see if the difference in shades and colors would affect the experience and make a colorblind user feel excluded.

Design System

Our style guide is fundamental in keeping consistency throughout our product, even in wireframes there has to be a consistent design so that we as UX or UI Designers do not fall off track or stray away from each other too much. This also allows for any future additions to the design team as well as the development team to have quick access to the theme and assets. Things such as CTAs, UI elements and Typography can be easily misconstrued to other members of our team if not handled in the right way.a

Mockup Prototype

Embedded here is the final prototype of our mockups, this is fully intractable and you can click on the fullscreen mode to pick it larger to click through. This is what was presented to our development team and what was used to finalize design for real world application and use. The collaboration between our UX and UI designers was amazing and the cohesiveness played a massive role in finalizing these designs.

Interaction Design

Into interaction design, we really wanted to make the website as feedback heavy as we could without overwhelming the user. In the instance shown here, we gave users a button press feedback when choosing their end goal in the goal setting process. We used a similar feedback system throughout the process but this example served as a good basis for what a user should expect to feel through and through.

The carousel on the home page for user stories was limited to 3. While the UX law, Millers Law, states that 5-7 is the limit of what a human being can memorize and concentrate on, further research showed us that in carousels, 3-5 non looping as the best practice. We went with 3 in this instance and allowed the users to scroll between the 3 with a breadcrumb navigation on the bottom indicating how many there were so they never felt like they were looking at a death scroll of user stories.

Similar to the first button press, in our IXD, the “Current Daily Tasks” interaction allowed us to fully give a user a sense of accomplishment in a positive and simple way. Having used our persona through the process, we know that some have busy lives and could not always fully jump into the specific goal they wanted to mark off a daily task for. We had to give those users and easy way to feel a sense of accomplishment, this is where this specific interaction came from. User testing came back successful on this.

User Testing

User testing, the ultimate test of not only our designs and approach but also our patience. There is no lie or hesitation when I say that, user testing tested our limits as designers. This is not a bad thing however, this really showed us that even as users ourselves, we may become biased in our designs and how they look and feel. As a group we had a mix of group user testing and 1:1 user testing, what we saw and heard continually molded our approach and design.

Iterations

As any good designer should, we took the user testing we did throughout the product and iterated on multiple designs, features and functions to make it the most intuitive process we could. Our biggest example that we are using here is the goal setting process, this process, while easily the most integral to a goal setting website, saw iteration upon iteration to make it simple and intuitive. Iterations from a simple CTA to an auto advance system on 400ms which is the best practice for auto advanced button presses.

The Pivot

The way i’ve been discussing this product throughout the case study, it may seem like we had it all together but in reality, it was far from it. See, teamwork has always come easy to me and still does, but with design it becomes a tough debate for all of us on what works and what does not.For this particular product, as a team we had a similar direction we wanted to go in but different ideas of how to do it. While we generally came to the same consensus, in user testing we realized what had to be done.

Throughout user testing, we kept cutting bits and pieces out of the whole. This eventually lead to what one user pointed out as a “melting pot”. We had to look back at everything we were trying to achieve and what we had. We realized that we never accepted what we had lost throughout all the iterations and testing and never evolved from that.

We basically had features that we could relate to a pie without the filling. It was a melting pot. This was 3 days before our deadline to hand off to development.

We took this as a challenge of more to come in our careers so we did what we expected of our users, to persevere and achieve and we did. Within in 2 days, we did a slight redesign of theme for launch, of features and functions and user tested it. The results we received gave us hope for launch and the future.

Development Hand-off

The hand off to development, this single handedly could be the most vital process in the entire framework. We have to make sure the hand off of flows, sitemaps, wireframes, style guides, mockups and all the assets we used were usable and understandable to the team who was building this into a widely usable website.

I say this as if it were a intense and stressful discussion, but to be honest, our development team was perfect at openly talking about what they need and how they see things working. This is not a common occurrence and we know this, but it definitely made this hand off easier.

Development Progress

The hand off process going smoothly allowed us to be able to get these screenshots within 2-3 days from development on their progress. This progress could not have been achieved without our own teams cooperation and willingness to work together to endlessly design, experiment and iterate. The framework we choose proved instrumental in being able to get this to launch and development.

Future Updates

As for the future, we want to be able to bring in a lot of features that were cut in user testing. We ultimately had those features because we did not have enough time in a 3 week sprint to give them the rigorous user testing and iterations they deserved. This fully included the community features and mentor program, these 2 features saw early iterations but did not make the cut for launch. We also though of ways to increase revenue throughout the website but those did not make the initial cut but will for sure be added in the first few major updates of the website.