Ad Astra

A website to promote products and events
Scope
User Research, Wireframes, Visual Design, Usability Testing, Prototyping
Role
UX Designer
Client
Bootcamp Student Work
Timeline
2 weeks
Tools
Figma, Zoom, Maze
Tools
Figma, Zoom, Undraw
Client
Bootcamp Student Work
Timeline
6 weeks
The Short Version
Develop a Local Coffee Shop's Online Presence
Ad Astra lacks an online presence that showcases vital information to customers. They have been in business for over 12 years. I need to ensure the product fits with their current logo and image.
Problem: Customers can't locate important information
Users' state frustrations in looking up coffee shops stems from being unable to locate key information such as photos of the business, menu, hours and location.
Solution: A mobile first website to develop branding
The design solution provides valuable information for existing and new Ad Astra customers. The goal is to promote Ad Astra new building and drive traffic to their social media sites.
my discovery process
Research and Identify Opportunities
What do people value when looking up coffee shops?
I outlined a research plan about my goals, methodologies, and participants. The focus was to gather key insights from the users.
  • Learn why people go to coffee shops
  • Learn how people look up information
  • Understand why people look up information about coffee shops
  • Determine what criterias people value when looking up information
I used the following research methods to better understand what users value.
  • Competitive analysis
  • Surveys
  • User Interviews
Competitor Analysis
I conducted research with 3 coffee franchises to understand what is offered to consumers in the current market.
The strengths: Vehicle locations and safety briefings
Competitors and Lime all have visible and clear vehicle details and safety briefings.
  • Visible battery life and vehicle information
  • Map view and parking locations
  • Rider safety information
The opportunity: Lack of loyalty programs
Although discounts and long term rentals are offered on competitors' platforms, there isn't a program that offers incentives to use one platform over another.
User Surveys
Key insight: Mobile searches for locations, menus, and hours
I surveyed over 36 participants who have visited coffee shops to understand what users value and how they look up information.
User Interviews
Key insight: A place with an inviting atmosphere & good coffee
I conducted 5 remote and 3 in person interviews with participants who visit coffee shops to understand their motivations and needs.
Questions asked to users:
  • Can tell me about your experiences visiting coffee shops?
  • How do you feel about coffee shops?
  • What would you say are the most important factors to consider when picking a coffee shop to visit? why?
  • Can you walk me through the process on how you would look up information about a coffee shop?
User Persona
3 User personas were developed from the primary research to be representatives of user voices. They were referenced through the design process to ensure the solutions aligned with user goals.
  • The Modern Worker
  • The Regular
  • The Outgoing Reader
Ideation
Improve Ad Astra Online Presence
How might we help Ad Astra present key information to customers?
By assessing users’ goals in searching coffee shops and evaluating the business’s goals of increasing online presence, I was able to identify 3 project goal objectives.
  • Important information of business online
  • User-friendly and easily accessible content
  • Accurate representation of Ad Astra
Information Architecture
I ran a card sorting exercise with 12 participants through Optimal Cardsort to understand how users organize and group information. The results helped group information for the site map.
  • 100% Grouped photos of beverages and menu items
  • 100% Grouped menu items and prices
  • 50%+ Grouped Store information and social media
Card Sort
Site Map
Design Development
Design Screen Layouts
Mobile and Desktop Wireframes
The wireframes allowed me to layout the pages, receive feedback, and make any alterations quickly and efficiently.
  • Desktop: 12 column grid
  • Mobile: 4 column grid
Reinforce Ad Astra’s brand with a style guide
Adhering to the business’ original logo and colors, I added maroon red with beige to reflect the user and business needs.
  • Original logo of the business
  • Colors are pulled from logo
  • A warm, cozy atmosphere that attracts coffee lovers
User Testing
Conduct Usability Testing
I conducted remote usability testing with 16 participants using Zoom and Maze.
  • Zoom: 6 moderated participants
  • Maze: 10 unmoderated participants
Iterations
Three Major Changes
Iteration 1: Emphasis on menu categories
Concern: Users overlooked the menu tabs.
Before
  • 5/6 participants overlooked the tabs for the menu on their first attempt.
  • 1/6 participants was unable to complete the task.
After
  • Increased font size of categories.
  • Sticky header so users can easily navigate to other sections throughout the page.
Iteration 2: Increase cafe location prominence
Concern: The location wasn’t clearly displayed.
Before
  • 1/6 participants was unable to locate the address.
  • Users felt having the address at the didn't make the location stand out
After
  • I added a sticky heading up top that contained the address.
Iteration 3: Clarify gift card confirmation screen
Concern: Users were unsure if they would get a receipt for their purchase.
Before
  • 2/6 participants felt the gift card confirmation screen could provide more information.
After
  • Added more details and instructions to users so they would have record of the purchase to refer to later.
Final Designs & Prototype
Ad Astra’s Responsive Web Design
The final design contains iterations from the usability testing to improve user experience with menu navigation and cafe location.e
Takeaways
Challenges
Design Integration with Existing Brand Logo
As I reflect on my work, one of the obstacles I faced was implementing the colors from the original company logo into the web page design cohesively.
  • The original logo had a wide color palette.
  • It was difficult to find a balance between the contrasting colors.
  • Through testing and feedback, I selected colors that portrayed a warm, cozy atmosphere.
Next Steps
Measure Impact and Prioritize Future Designs
Integrating both user and business goals, the designs showcased Ad Astra's new location, menu and social media sites. Moving forward, I would gather data on KPIs to ensure strong engagement with customers.
  • Bounce rate
  • Pages per session
  • Scroll depth
  • Conversion rate